<template>
    <div class="content">
        <img class="logo" src="@/static/images/logo.png" />
        <div class="title">
            <p class="welcome">欢迎来到上岸宝，</p>
            <p class="welcome">接下来的快乐时光，有我们陪着您</p>
        </div>
        <view class="btn">
            <!--#ifdef H5-->
            <button class="login-btn" @click="h5Login">H5用户一键登录</button>
            <!--#endif-->
            <!--#ifdef MP-WEIXIN-->
            <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                一键快捷登录/注册
            </button>
            <!--#endif-->
            <div class="cancel" @click="cancel">取消</div>
        </view>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            code: null,
        };
    },
    onLoad() {
        let that = this;
        uni.login({
            success(res) {
                if (res.code) {
                    that.code = res.code;
                }
            },
        });
    },
    methods: {
        getPhoneNumber(e) {
            let that = this;
            if (!e.detail.code) {
                uni.showToast({
                    title: '您已取消手机号授权登录',
                    icon: 'none',
                });
                return false;
            }
            uni.login({
                success(res) {
                    if (res.code) {
                        that.$Api.member.auth
                            .login({
                                loginCode: res.code,
                                phoneCode: e.detail.code,
                            })
                            .then(async res => {
                                await that.$store.dispatch('token', res);
                                await that.$store.dispatch('getUserInfo').then(res => {
                                    if (!res.avatar || !res.nickname) {
                                        uni.navigateTo({
                                            url: '/pages/login/register',
                                        });
                                    } else {
                                        uni.navigateBack();
                                    }
                                });
                            });
                    }
                },
            });
        },
        h5Login() {
            this.$store.dispatch('token', '23333');
            uni.navigateBack();
        },
        cancel() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    width: 100%;
    position: relative;
    padding: 220rpx 30rpx;
    background: linear-gradient(180deg, #e6dfff 0%, #fff 30%);
    box-sizing: border-box;
    @include flexBox(flex-start, center, column);
    .logo {
        width: 176rpx;
        height: 176rpx;
    }
    .title {
        margin-top: 40rpx;
        .welcome {
            font-size: 28rpx;
            color: #2f2f2f;
            text-align: center;
            line-height: 40rpx;
        }
    }
    .login-btn {
        width: 690rpx;
        height: 88rpx;
        line-height: 88rpx;
        color: #fff;
        font-size: 32rpx;
        margin-top: 140rpx;
        background: #5428ec;
    }
    .cancel {
        font-size: 32rpx;
        color: #5c5c5c;
        margin-top: 40rpx;
        text-align: center;
    }
}
</style>
